<template>
  <div class="container">
    <default-header></default-header>
    <div>
      <img
        src="../../../assets/img/home/a893e413945be88b2b97a330890c804b.jpg"
        alt=""
        style="width: 100%"
      />
    </div>
    <div v-if="info.id" class="width1080 margin0auto">
      <ol class="oh pt20">
        <li class="fl">
          <a href="/">首页</a>
        </li>
        <li v-for="(item, index) in breadcrumbs" :key="index" class="fl">
          <span>&nbsp;&gt;&nbsp;</span
          ><a :href="item.url ? item.url : '/home/news?cate_id=' + item.id">{{
            item.name
          }}</a>
        </li>
      </ol>
      <h1 class="tac pt40">{{ info.name }}</h1>
      <p class="line tac fs16 color_666 mt10 pb40">
        阅读量：{{ info.hits }} 来源：<a :href="info.comefrom_link || ''">{{
          info.comefrom
        }}</a>
        时间：{{ info.ctime | timeFormatFilter("YYYY-MM-DD HH:mm:ss") }}
      </p>
      <div class="html pt20 pb20" v-html="content"></div>
      <div class="oh">
        <p class="fl">
          上一篇：<a :href="'/home/news/detail?id=' + (pre.id || info.id)">{{
            pre.name || "没有了"
          }}</a>
        </p>
        <p class="fr">
          下一篇：<a :href="'/home/news/detail?id=' + (next.id || info.id)">{{
            next.name || "没有了"
          }}</a>
        </p>
      </div>
    </div>
    <p v-else class="tac fs20 pt50 pb50">
      404，对不起，您查找的内容不存在！
    </p>
    <default-footer class="mt20"></default-footer>
  </div>
</template>

<script>
import "highlight.js/styles/atom-one-dark.css";
import DefaultHeader from "../../../components/default-header";
import DefaultFooter from "../../../components/default-footer";
import { timeFormatFilter } from "../../../lib/filters/common";

export default {
  name: "Detail",
  filters: { timeFormatFilter },
  components: { DefaultFooter, DefaultHeader },
  head() {
    return {
      title: this.info.name
    };
  },
  async asyncData({ app, query }) {
    // 新闻详情
    const info = await app.$newsService.detail(query.id);
    // 上一篇下一篇
    const pre = await app.$newsService.prenext(`id < ${query.id}`, `id desc`);
    const next = await app.$newsService.prenext(`id > ${query.id}`, `id asc`);
    // 面包屑导航
    const breadcrumbs = await app.$cateService.breadcrumbs(info.cate_id, []);
    return {
      breadcrumbs,
      info,
      pre,
      next,
      content:
        (info.contents && info.contents[0] && info.contents[0].content) || ""
    };
  }
};
</script>

<style scoped lang="scss">
.line {
  border-bottom: 1px solid #ccc;
}

.html /deep/ p {
  text-indent: 2em;
}
</style>
